<template>
  <!-- 歌手 -->
  <div id="searchSinger">
    <van-list v-model="loading"
              :finished="finished"
              offset="10"
              finished-text="没有更多了"
              @load="onLoad">
      <van-cell-group>
        <van-cell center
                  v-for="(artist,index) in artistList"
                  :key="index"
                  :title="artist.name">
          <template #icon>
            <van-image round
                       width="50"
                       height="50"
                       :src="artist.img1v1Url"
                       style="padding-right: 10px" />
          </template>
          <template #right-icon>
            <van-button round
                        plain
                        size="mini"
                        icon="plus"
                        :color="globalObj.normColor">关注</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { getSearch } from '@/api/search'
export default {
  name: 'searchSinger',
  data() {
    return {
      artistList: [],
      loading: true,
      finished: false,
      rowText: '',
      limit: 20,
      type: 100,
    }
  },
  methods: {
    onLoad() {
      this.loading = true
      this.limit = this.limit + 10
      this.initData()
    },
    initData() {
      getSearch(this.rowText, this.limit, this.type).then((res) => {
        this.artistList = res.result.artists
        this.loading = false
      })
    },
  },
  created() {
    this.initData()
  },
}
</script>

<style>
</style>